<template>
	<view class="container">
		<image src="../../static/img/zlwblog.png" style="width: 100%;" class="cover"></image>
		<!--专题头部-->
		<view class="subject">
			<view class="title">{{name}}</view>
			<view class="summary">{{description}}</view>
			<view class="info">
				<text class="text">章节数：{{total}}章</text>
				<!-- <text class="text">浏览量：100</text> -->
			</view>
		</view>
		<!--列表-->
		<view class="list">
			<card v-for="(item, index) in list" :key="item.id" :item='item'></card>
		</view>
		<u-loading-page :loading="loading" loading-text="loading..."></u-loading-page>
	</view>
</template>

<script>
	import {
		articleList
	} from '../../api/article'
	import {
		getCategory
	} from '../../api/category'
	export default {
		data() {
			return {
				loading: false,
				list: [],
				queryParams: {
					pageNum: 1,
					pageSize: 50,
					categoryId: ""
				},
				description: "",
				name: "",
				total: 0
			}
		},
		onLoad(e) {
			this.description = e.description
			this.name = e.name
			uni.setNavigationBarTitle({
				title: e.name
			})
			const id = e.id
			this.queryParams.categoryId = id
			this.getList()
		},

		methods: {
			getList() {
				this.loading = true
				articleList(this.queryParams).then(res => {
					this.list = res.rows
					this.total = res.total
					this.loading = false
				}).catch(() => {
					this.loading = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.subject-cover {
		width: 100%;
	}

	.subject {
		margin-bottom: 20rpx;
		background-color: #FFF;
		padding: 20rpx 30rpx 30rpx;
		box-shadow: 0 8rpx 4rpx #F5F5F5;

		.title {
			font-size: 32rpx;
			font-weight: bold;
		}

		.summary {
			color: #777;
			margin: 10rpx 0;
			font-size: 24rpx;
		}

		.text {
			color: #999;
			font-size: 24rpx;
			margin-right: 40rpx;
		}
	}
</style>